<template>
  <div class="detail">
    <div class="bk">
      <div class="banner">
        <img :src="data.imgUrl" alt="">
      </div>
      <div class="pager">
        <div class="title">{{data.name}}</div>
        <div class="price">
          <span>价格：</span> <span>{{data.price}}元</span>
        </div>
        <div class="he">
          <div class="cate">
            <div class="cateinfo">类型：</div>
            <div class="catelist">
              <span v-for="(item,index) in data.category" @tap="isActiveCate = index" :class="{'active': isActiveCate == index}" class="catekuai">{{item}}</span>
            </div>
          </div>
          <div class="cate">
            <div class="cateinfo">套餐：</div>
            <div class="catelist">
              <span v-for="(item,index) in data.meal" @tap="isActiveMeal = index" :class="{'active': isActiveMeal == index}" class="catekuai">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="line2"></div>
        <div class="area">
          <div>
            <span class="area-dq">地区</span>
            <span class="area-dt">{{address}}</span>
          </div>
          <div>
            <span class="change" @tap.stop="hidden = !hidden;serhidden = true">更换 &gt;</span>
          </div>
        </div>
        <div class="line2"></div>
        <div class="server">
          <div class="serve-left">
            <span class="server-title">服务者</span>
            <span class="server-dian"></span>
            <span class="server-name">{{name}}</span>
          </div>
          <div>
            <span class="server-change" @tap.stop="serhidden = !serhidden;hidden=true">更换 &gt;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @tap="open">
      <mt-button class="mybtn"  type="primary" size="large">免费咨询</mt-button>
    </div>
    <!--<div class="comment">-->
      <!--<div class="header">-->
        <!--<div class="title">-->
          <!--<span>用户评价</span><span>好评率：</span><span>{{data.comm.ratio}}</span>-->
        <!--</div>-->
        <!--<div class="number">-->
          <!--<span>{{data.comm.count}}条评价</span>-->
          <!--<span> &gt;</span>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="content">-->
        <!--<div class="box" v-for="item in data.comm.comments">-->
          <!--<div class="title">{{item.content}}</div>-->
          <!--<div class="area">-->
            <!--<div>-->
              <!--<span v-for="n in item.star" class="mui-icon mui-icon-star-filled"></span>-->
            <!--</div>-->
            <!--<span>{{item.address}}</span>-->
            <!--<span>{{item.date}}</span>-->
          <!--</div>-->
          <!--<div class="list">-->
            <!--<span class="ku" v-for="tip in item.tip">{{tip}}</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <div @tap.stop class="det-picker" v-if="!hidden">
      <address-picker @showAddressPicker="showAddress"></address-picker>
    </div>
    <div @tap.stop class="det-picker" v-if="!serhidden">
      <service-picker @showServicePicker="showService"></service-picker>
    </div>
  </div>
</template>

<script>
  import AddressPicker from '@/components/common/AddressPicker'
  import ServicePicker from '@/components/common/ServicePicker'
  import detailData from '../../data/detail'
  import storage from 'storejs'

  export default {
    name: 'Index',
    components: {
      AddressPicker,
      ServicePicker
    },
    data: function () {
      return {
        address: '北京市-市辖区-东城区',
        hidden: true,
        serhidden: true,
        name: '高世洪',
        data: null,
        isActiveCate: 0,
        isActiveMeal: 0,
      }
    },
    created() {
      this.initData();
    },
    mounted() {
      document.addEventListener('tap', (e) => {
        this.hidden = true;
        this.serhidden = true;
      })
    },
    methods: {
      // handleComponent: function(){
      //   if($('.detail').height() <= window.innerHeight) {
      //     $('body').css("height",window.innerHeight+100);  //强制让内容超过
      //   }
      // },
      showAddress(data) {
        this.address = data.province + '--' + data.city + '--' + data.country;
      },
      showService(data) {
        this.name = data;
      },
      initData() {
        //获取参数

        let bs = this.$route.params.bs || storage.get('bs');

        //存入 刷新使用
        storage.set('bs',bs)
        //赋值
        this.data = detailData.find((value, index, arr) => {
          return value.bs == bs;
        })
      },
      //免费咨询
      open(){
        get_chat_event('advice')
        //_53App.talk('icon','&zdkf_type=1&kf=1934734627%40qq.com&kflist=off')
      },
    }
  };
</script>

<style lang="less" scoped>
  .detail {
    background-color: #fff;
    padding-bottom: 1.5rem;
  }

  .bk .banner img {
    width: 100%;
    display: block;
    height: 3.5rem;
  }

  .bk .line2 {
    border-bottom: 2px solid #e0e0e0;
  }

  .bk .he {
    padding-bottom: 0.2rem;
  }

  .bk .server {
    display: flex;
    font-size: 0.24rem;
    justify-content: space-between;
    height: 0.92rem;
    line-height: 0.92rem;
    .serve-left {
      display: flex;
      align-items: center;

    }
    .server-title {
      color: #999;
      padding-right: 0.37rem;
    }
    .server-dian {
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background-color: #646464;
      margin-right: 0.1rem;
    }
    .server-change {
      color: #04bbf7;
    }
  }

  .bk .pager {
    background-color: #fff;
    padding: 0 0.2rem;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 0.2rem;
  }

  .bk .pager .title {
    height: 1.08rem;
    line-height: 1.08rem;
    font-size: 0.37rem;
    color: #333;
  }

  .bk .pager .price {
    font-size: 0.24rem;
    color: #666;
    line-height: 0.24rem;
  }

  .bk .pager .price span:nth-child(1) {
    display: inline-block;

  }

  .bk .pager .price span:nth-child(2) {
    font-size: 0.32rem;
    color: #F9444D;
  }

  .bk .active {
    border: 1px solid #fa444e !important;
    color: #fa444e !important;
  }

  .bk .cate {
    color: #999;
    display: flex;
    padding-top: 0.25rem;
    .cateinfo {
      font-size: 0.24rem;
      white-space: nowrap;
    }
    .catekuai {
      display: inline-block;
      height: 0.58rem;
      line-height: 0.58rem;
      padding: 0 0.3rem;
      font-size: 0.24rem;
      border: 1px solid #999;
      margin-right: 0.1rem;
      margin-bottom: 0.08rem;
    }
  }

  .bk .area {
    display: flex;
    font-size: 0.24rem;
    justify-content: space-between;
    height: 0.92rem;
    line-height: 0.92rem;
    .area-dq {
      color: #999;
      padding-right: 0.9rem;
    }
    .area-dt {
      color: #666;
    }
    .change {
      color: #04bbf7 !important;
    }
  }

  .det-picker {
    position: fixed;
    bottom: 1rem;
    right: 0;
    width: 100%;
    background-color: #f0f0f0;
  }

  .comment {
    background-color: #fff;
  }
  .comment .header {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    height: 0.9rem;
    line-height: 0.9rem;
    padding: 0 0.2rem;
  }

  .comment .header > .title > span:nth-child(1) {
    color: #333333;
    font-size: 0.28rem;
    padding-right: 0.28rem;
  }

  .comment .header > .title > span:nth-child(2) {
    color: #666666;
    font-size: 0.28rem;
  }

  .comment .header > .title > span:nth-child(3) {
    color: #fa444e;
    font-size: 0.26rem;
  }

  .comment .header > .number {
    color: #999;
    font-size: 0.28rem;
  }

  .comment .content {
    padding: 0 0.2rem;
  }

  .comment .box {
    height: 1.87rem;
    border-bottom: 2px solid #E0E0E0;
    padding-top: 0.25rem;
  }

  .comment .box .title {
    font-size: 0.23rem;
    line-height: 0.25rem;
    color: #333;
    padding-bottom: 0.25rem;
  }

  .comment .box .area {
    display: flex;
    justify-content: space-between;
    font-size: 0.23rem;
    line-height: 0.25rem;
    color: #666666;
  }
  .comment .box .area > span:before {
    font-size: 0.23rem;
    line-height: 0.25rem;
  }
  .comment .box .area > span:last-child {
    color: #999;
  }

  .comment .box .list {
    padding-top: 0.2rem;
  }

  .comment .ku {
    display: inline-block;
    height: 0.4rem;
    padding: 0 0.1rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
    color: #dc9149;
    background-color: #fffae5;
    text-align: center;
    margin-right: 0.1rem;
  }
  .comment .mui-icon {
    font-size: 0.23rem;
  }
  .comment .mui-icon-star-filled:before {
    color: #ff943D;
  }
  .btn {
    padding: 0 0.2rem;
  }
  .mybtn {
    font-size: 16px;
  }
</style>
